<template>
	<view>
		<view class="home-nav-bar" :style="scrollTop > 50 ? 'opacity: 1' : ''">
			<NavBar>
				<view slot="left">云诺端</view>
			</NavBar>
		</view>
		<view class="swiper-view">
			<swiper class="swiper-css" :autoplay="true" @change="(event) => swiperIndex = event.detail.current">
				<swiper-item v-for="(item, index) in swiperList" :key="index">
					<image :src="`${IMG_URL}${item.imgUrl}`" class="swiper-image" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="swiper-dot">
				<view v-for="(item, index) in swiperList.length" :key="index" class="dot-item"
					:class="{'dot-active':index == swiperIndex}">
				</view>
			</view>
		</view>
		<view class="icon-card">
			<image src="/static/title-bg-2.png" class="title-image"></image>
			<view class="card-title">走进诺众</view>
			<view class="card-icon">
				<navigator url="/pagesHome/companyDynamic/companyDynamic" hover-class="none" class="icon-item">
					<image src="/static/home-icon-1.png" class="icon-image"></image>
					<view>公司动态</view>
				</navigator>
				<navigator url="/pagesHome/companyEnvironment/companyEnvironment" hover-class="none" class="icon-item">
					<image src="/static/home-icon-2.png" class="icon-image"></image>
					<view>公司环境</view>
				</navigator>
				<navigator url="/pagesHome/projectDescription/projectDescription" hover-class="none" class="icon-item">
					<image src="/static/home-icon-8.png" class="icon-image"></image>
					<view>项目说明</view>
				</navigator>
				<navigator url="/pagesHome/classroomList/classroomList" hover-class="none" class="icon-item">
					<image src="/static/home-icon-3.png" class="icon-image"></image>
					<view>诺众课堂</view>
				</navigator>
				<navigator url="/pagesHome/partner/partner" hover-class="none" class="icon-item">
					<image src="/static/home-icon-4.png" class="icon-image"></image>
					<view>合作伙伴</view>
				</navigator>
				<navigator url="/pagesHome/homeAbout/homeAbout" hover-class="none" class="icon-item">
					<image src="/static/home-icon-7.png" class="icon-image"></image>
					<view>关于我们</view>
				</navigator>
				<navigator url="/pagesHome/userSign/userSign" hover-class="none" class="icon-item">
					<image src="/static/home-icon-5.png" class="icon-image"></image>
					<view>每日签到</view>
				</navigator>
				<navigator url="/pages/integralShopping/integralShopping" hover-class="none" class="icon-item">
					<image src="/static/home-icon-6.png" class="icon-image"></image>
					<view>积分商城</view>
				</navigator>
			</view>
		</view>

		<view class="image-nav">
			<image src="/static/title-bg-1.png" class="title-image"></image>
			<view class="card-title">万小宝区</view>
			<view class="image-nav-content">
				<image src="/static/image-nav-1.png" class="nav-one"></image>
				<view class="nav-two">
					<image src="/static/image-nav-2.png" class="two-image"></image>
					<image src="/static/personal-center.png" class="two-image"></image>
				</view>
			</view>
		</view>

		<view class="card-view">
			<view class="card-bg"></view>
			<image src="/static/title-bg-3.png" class="title-image"></image>
			<view class="card-title">
				<view>推荐项目</view>
				<navigator open-type="switchTab" url="/pages/project/project" hover-class="none" class="card-all">
					<view>全部</view>
					<uni-icons type="right" color="#69442E" size="25upx"></uni-icons>
				</navigator>
			</view>
			<view class="card-project" v-for="(item, index) in projectList" :key="index">
				<CardProjectItem :item="item"></CardProjectItem>
			</view>
		</view>
		<view style="height: 160upx;"></view>
		<FloatTopButton v-if="scrollTop > 100"></FloatTopButton>
		<UpdateWindow v-if="isSystemUpdate" :entity="systemUpdate"></UpdateWindow>
		<LoginGoButton v-if="isLogin" @change="getUserInfo"></LoginGoButton>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isSystemUpdate: false,
				isLogin: false,
				scrollTop: 0,
				iconList: [],
				swiperList: [],
				swiperIndex: 0,
				projectList: [],
				systemUpdate: {
					code: '1.0.1',
					content: ''
				},
				queryData: {
					pageNo: 1,
					pageSize: 15,
					pushFlag: 10
				}
			}
		},
		onLoad() {
			this.getUserInfo()
			this.getBannerList()
			this.getHomeIconList()
			this.getProjectFindPage()
		},
		onPageScroll(event) {
			this.scrollTop = event.scrollTop
		},
		onReachBottom() {
			if (this.isPc) return
			this.queryData.pageNo += 1
			this.getProjectFindPage()
		},
		methods: {
			async getUserInfo() {
				const res = await uni.$api.getUserInfoResolve()
				console.log(res);
				this.isLogin = res.code == 'A0307' || res.code == 'B0301'
			},
			async getBannerList() {
				const res = await uni.$api.bannerList(10)
				this.swiperList = res.data || []
			},
			async getHomeIconList() {
				const res = await uni.$api.homeIconList()
				this.iconList = res.data || []
			},
			async getProjectFindPage() {
				const res = await uni.$api.getProjectFindPage(this.queryData)
				const list = res.data.rows || []
				this.queryData.total = res.data.totalRows
				this.projectList = this.queryData.pageNo == 1 ? list : this.projectList.concat(list)
			}
		}
	}
</script>

<style scoped lang="scss">
	.home-nav-bar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		opacity: 0;
		transition: all 0.3s;
	}

	.swiper-view {
		width: 100%;
		height: 429upx;
		position: relative;

		.swiper-css {
			width: 100%;
			height: 100%;

			.swiper-image {
				width: 100%;
				height: 100%;
			}
		}

		.swiper-dot {
			width: 100%;
			@extend .row;
			position: absolute;
			z-index: 1;
			left: 0;
			bottom: 32upx;

			.dot-item {
				width: 14rpx;
				height: 2px;
				background: rgba($color: #FFFFFF, $alpha: 0.5);
				transition: all 0.3s;
			}

			.dot-item+.dot-item {
				margin-left: 13upx;
			}

			.dot-active {
				width: 33rpx;
				height: 2px;
				background: #FFFFFF;
			}
		}
	}

	.card-title {
		width: 100%;
		@extend .row-between;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 600;
		color: #2C1101;
		margin-bottom: 36upx;
		padding-left: 40upx;
		position: relative;
		z-index: 1;

		.card-all {
			@extend .row;
			font-size: 25rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #69442E;
		}
	}

	.title-image {
		width: 168upx;
		height: 105upx;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
	}

	.icon-card {
		width: 100%;
		padding-top: 25upx;
		padding-bottom: 40upx;
		background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 14rpx 14rpx 0rpx 0rpx;
		position: relative;
		margin-top: -10upx;

		.card-icon {
			width: 100%;
			padding: 0 20upx;
			@extend .row-start;
			flex-wrap: wrap;
			margin-top: -16upx;
			position: relative;
			z-index: 1;

			.icon-item {
				width: calc(100% / 4);
				margin-top: 16upx;
				@extend .column;
				font-size: 25rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #2C1101;

				.icon-image {
					width: 116upx;
					height: 116upx;
				}
			}
		}
	}

	.image-nav {
		width: 100%;
		padding-top: 25upx;
		background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
		border-radius: 14rpx 14rpx 0rpx 0rpx;
		@extend .column;
		position: relative;
		z-index: 1;




		.image-nav-content {
			width: 707rpx;
			margin-top: -25upx;
			background: #FFFFFF;
			border-radius: 14rpx;
			@extend .row-between;
			align-items: flex-start;
			padding: 18upx;

			.nav-one {
				width: calc(100% / 2 - 9upx);
				height: 228upx;
				text-align: top;
			}

			.nav-two {
				width: calc(100% / 2 - 9upx);

				.two-image {
					width: 100%;
					height: 105upx;
					text-align: top;
				}

				.two-image+.two-image {
					margin-top: 9upx;
				}
			}
		}
	}

	.card-view {
		width: 100%;
		padding-top: 25upx;
		margin-top: 18upx;
		position: relative;

		.card-title {
			padding-right: 38upx;
			margin-bottom: 20upx;
		}

		.card-bg {
			width: 100%;
			height: 317upx;
			background: linear-gradient(360deg, rgba(255, 255, 255, 0) 0%, #FFE6D0 100%);
			border-radius: 14rpx;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
		}

		.card-project+.card-project {
			margin-top: 20upx;
		}
	}
</style>